{% extends "based/based.html" %}
{% block title %}{{_("菜单设置")}}-{% endblock %}
{% block content %}

<data id="cid" content="{{data.cid}}"></data>
    <div class="row">
    <div class="col-md-12">
        <ul class="breadcrumb">
            <li><a href="/osr-admin/theme-setting/themes"><i class="fa fa-html5"></i>{{_("主题安装")}}</a></li>
            <li class="active">{{_("菜单设置")}}</li>

        </ul>
    </div>
</div>

<div v-cloak id="app" >
    <div class="row osr-adm-edit-page">
            <div class="col-xs-12">
                <div class="panel">
                    <header class="panel-heading">
                        <i class="fa fa-menu"></i>
                        <strong>
                            <span class="osr-color-secondary">{{_("当前设置主题")}}: {[current_theme_name]}</span>
                        </strong>
                    </header>
                </div>
                <div class="panel-body">
                     <select id="lang" name="lang"  class="form-control osr-form-control input-sm"
                        @change="switch_lang($event.target.value)">
                        {% for k,v in g.site_global.language.all_language.items() %}
                            {% if k==data.lang %}
                                <option value="{{ k}}" selected>
                                    {{ v.name}}
                                </option>
                            {% else %}
                                <option value="{{ k}}">
                                    {{ v.name}}
                                </option>
                            {% endif %}
                        {% endfor %}
                    </select>
                <br>
                    <div class="form-group">
                        <input type="text" class="form-control osr-input" v-model="order" minlength="1"
                                   placeholder="{{_('排序')}}" required/>
                        <input type="text" class="form-control osr-input" v-model="display_name" minlength="1"
                               placeholder="{{_('显示名称')}}" required/>
                            <textarea class="form-control osr-input" v-model="json_data" minlength="2"
                                      placeholder="{{_('Json数据, 每个主题需要的格式可能不一样，根据主题要求设置')}}" required >

                            </textarea>
                        <br>
                        <button v-on:click="add()" class="btn-sm osr-btn btn btn-success">{{_("添加")}}</button>
                         <button class="btn-sm osr-btn btn btn-default disabled">{{_("删除")}}</button>
                    </div>
                    <div v-for="nav in navs" class="form-group">
                        <input type="text" class="form-control osr-input" v-model="nav.order" minlength="1"
                               placeholder="{{_('排序')}}" required/>
                        <input type="text" class="form-control osr-input" v-model="nav.display_name" minlength="1"
                               placeholder="{{_('显示名称')}}" required/>
                        <textarea class="form-control osr-input" v-model="nav.json_data" minlength="2"
                                  placeholder="{{_('Json数据, 每个主题需要的格式可能不一样，根据主题要求设置')}}" required >

                        </textarea>
                        <br>
                        <button v-on:click="update(nav._id, nav.display_name, nav.json_data, nav.order)" class="btn-sm osr-btn btn btn-info">{{_("更新")}}</button>
                        <button v-on:click="warning_modal(null, 'del', nav._id)" class="btn-sm osr-btn btn btn-danger" >{{_("删除")}}</button>
                    </div>
              </div>

            </div>
    </div>
</div>
<script>
    var vue = new Vue({
      el: '#app',
      delimiters:['{[', ']}'],
      data:{
        navs:[],
        display_name:'',
        json_data:'',
        current_theme_name:null,
        lang:null,
        order:99
      },
      methods: {show_btn:show_btn}
    })

    // 加载完页面执行
    $(document).ready(function(){

        var url_s = get_url_parameter();
        vue.current_theme_name = get_obj_value(url_s, "theme", null);
        vue.lang = get_obj_value(url_s, "lang", null);
        get_navs();
    })

    function show_btn(id){
        alert(id)
        if( $("#"+id).hasClass("show") ){
            // 执行隐藏
            $("#"+id).hide().removeClass("show");
            // 其他
        }else{
            // 显示
            $("#"+id).show().addClass("show");
        }
    }

    function get_navs(){

        var result = osrHttp(
            "GET","/api/admin/theme/nav",
            {
                theme_name: vue.current_theme_name,
                language: vue.lang
            },
                args={not_prompt:true
            });
        result.then(function (r) {
            vue.navs = r.data.navs;
            $.each(vue.navs,function(n,value){
                value["json_data"] = JSON.stringify(value["json_data"]);
          });

        });

        var url = window.location.pathname+"?lang="+vue.lang;
        if(vue.current_theme_name){
            url = url + "&theme="+vue.current_theme_name;
        }
        history_state(title=null,url=url);

    }

    function switch_lang(value){
        vue.lang = value;
        get_navs();
    }

    function add(){

        var d = {
            display_name:vue.display_name,
            json_data:vue.json_data,
            theme_name: vue.current_theme_name,
            language: vue.lang,
            order: vue.order
        }
        // 提交数据
        var result = osrHttp("POST","/api/admin/theme/nav", d);
        result.then(function (r) {
            if (r.status=="success" && r.data.msg_type=="s"){
                get_navs();
                vue.display_name = "";
                vue.json_data = ""
            }
        });
    }

    function update(cid, display_name, json_data, order){

        var d = {
            id:cid,
            display_name:display_name,
            json_data:json_data,
            theme_name: vue.current_theme_name,
            language: vue.lang,
            order:order
        }
        // 提交数据
        var result = osrHttp("PUT","/api/admin/theme/nav", d);
        result.then(function (r) {
            if (r.status=="success" && r.data.msg_type=="s"){
                get_navs();
            }
        });
    }


    function del(id){

        var d = {
                 ids:JSON.stringify([id])
        }
        // 提交数据
        var result = osrHttp("DELETE","/api/admin/theme/nav", d);
        result.then(function (r) {
            if (r.status=="success" && r.data.msg_type=="s"){
                get_navs();
            }
        });
    }
</script>
{% endblock %}
